<template>
	<view class="bigBox">
		<view class="top" @click="goToBack">
			<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode=""></image>
			<view class="">{{ timeBegin }}售后记录</view>
		</view>
		<view class="orderList" v-for="(item, index) in orderList" :key="index">
			<!-- <view class="name">
				<view class="controlBox" :class="{'isControlCheck':item.controlIsCheck}"
					@click="changeControlState(index,item)" v-if="item.state=='未处理'">
					<view class="control">
						<view>操作</view>
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode="">
						</image>
					</view>
					<view class="">
						<view class="checkControl" @click.stop="clickControlMenu(index,'refund')">售后退款</view>
						<view class="checkControl" @click.stop="clickControlMenu(index,'reject')">驳回</view>
					</view>
				</view>
			</view> -->
			<view class="">
				<view class="">
					序号:
					<text>{{ item.hcOrderMerchant.pickingSerialNo }}</text>
				</view>
				<view class="">
					姓名:
					<text>{{ item.hcOrderMerchant.nameTakingMeal }}</text>
				</view>
				<!-- <view class="">地址: <text>{{item.hcOrderMerchant.pickingAddress}}</text></view> -->
			</view>
			<view class="">
				<view class="">
					菜品名称:
					<text>{{ item.nameDishes }}</text>
				</view>
			</view>
			<view class="">
				<!-- <view class="">消费金额: <text>{{item.totalPrice}}元</text></view> -->
				<view class="">
					合作单价:
					<text>{{ item.hcOrderMerchant.commodityPrice }}元</text>
				</view>
			</view>
			<view class="">
				<view class="">
					餐品问题:
					<text>{{ item.foodProblems.split('：')[0] }}</text>
				</view>
			</view>
			<view class="">
				<view class="">
					投诉建议:
					<text>{{ item.feedback }}</text>
				</view>
			</view>
			<view class="imgContent">
				<view class="">餐品图片:</view>
				<view class="imgBox"><image :src="imgItem | getImg" mode="" v-for="(imgItem, index) in item.picture" :key="index"></image></view>
			</view>
			<view class="w50">
				<view class="">
					处理状态:
					<text>{{ item.state }}</text>
				</view>
				<!-- <view class="">退款金额: <text>{{item.refundAmount}}元</text></view> -->
				<view class="" v-if="item.state == '已处理'">
					商家扣款金额:
					<text>{{ item.deductMerchantAmount ? item.deductMerchantAmount : 0 }}元</text>
				</view>
				<!-- <view class="" v-if="item.state=='已处理'">商家扣款金额: <text>{{item.deductMerchantAmount-item.refundAmount}}元</text></view> -->
			</view>
			<view class="">
				<view class="">
					提交时间:
					<text>{{ item.createTime }}</text>
				</view>
			</view>
			<!-- v-if="item.state=='已处理'" -->
			<view class="" v-if="item.state != '未处理'">
				<view class="">
					处理时间:
					<text>{{ item.updateTime }}</text>
				</view>
			</view>
			<view class="" v-if="item.state == '已处理'">
				<view class="">
					扣款备注:
					<text>{{ item.deductionRemarks }}</text>
				</view>
			</view>
			<view class="">
				<view class="">
					门店累计出现投诉次数:
					<text>{{ item.complaintCount }}次</text>
				</view>
			</view>
		</view>
		<CommenFooter :checkIndex="0"></CommenFooter>
		<u-popup v-model="refundShow" mode="center" :closeable="true">
			<view class="refundContent">
				<view class="title">售后退款</view>
				<view class="writeLi">
					<view class="">退款金额</view>
					<u-input placeholder="请输入退款金额" type="text" v-model="returnInfo.refundAmount"></u-input>
				</view>
				<view class="writeLi">
					<view class="">扣除商家金额</view>
					<u-input placeholder="请输入扣除商家金额" type="text" v-model="returnInfo.deductMerchantAmount"></u-input>
				</view>
				<view class="writeLi">
					<view class="">备注</view>
					<u-input placeholder="请输入备注" type="textarea" :auto-height="true" height="100" v-model="returnInfo.deductionRemarks"></u-input>
				</view>
				<view class="commenButton" @click="hideRefund">确定</view>
			</view>
		</u-popup>
		<u-popup v-model="rejectShow" mode="center" :closeable="true">
			<view class="refundContent">
				<view class="title">驳回</view>
				<view class="writeLi">
					<view class="">驳回原因</view>
					<u-input placeholder="请输入驳回原因" type="textarea" v-model="rejectReason" :auto-height="true" height="100"></u-input>
				</view>
				<view class="commenButton" @click="refund">确定</view>
			</view>
		</u-popup>
		<!-- <view class="delOrder">
			<u-popup v-model="deleteShow" mode="center" :closeable="true">
				<view class="refundContent deleteContent">
					<view class="title">取消订单</view>
					<view class="text">确认取消订单吗？</view>
					<view class="control">
						<view class="" @click="deleteCancel">取消</view>
						<view class="" @click="deleteSubmit">确认</view>
					</view>
				</view>
			</u-popup>
		</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { getAfterSalesList, getAfterSalesListWithCompany, editAfterSaleOrder } from '@/utils/req/api.js';
import CommenFooter from '@/components/footer/footer.vue';
export default {
	components: {
		CommenFooter
	},
	data() {
		return {
			options1: [
				{
					label: '默认排序',
					value: 1
				},
				{
					label: '距离优先',
					value: 2
				},
				{
					label: '价格优先',
					value: 3
				}
			],
			orderList: [],

			refundShow: false,
			refundIndex: '',
			deleteShow: false,
			deleteIndex: '',
			rejectShow: false,
			rejectIndex: false,
			clickOrderInfo: '', //点击的订单信息
			//退款时的信息
			returnInfo: {
				refundAmount: '',
				deductMerchantAmount: '',
				deductionRemarks: ''
			},
			rejectReason: '',

			timeBegin: '',

			from: '' //从哪来
		};
	},
	onLoad(options) {
		let { timeBegin, from } = options;
		this.timeBegin = timeBegin;
		from && (this.from = 'company');
	},
	mounted() {
		this.getAfterSalesList();
	},
	methods: {
		goToBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		//获取售后订单信息
		async getAfterSalesList() {
			let res;
			if (this.from == 'company') {
				res = await getAfterSalesListWithCompany({
					timeBegin: this.timeBegin,
					pageNo: 1,
					pageSize: -1,
					merchantId:uni.getStorageSync('myInfo').id,
					companyId:uni.getStorageSync('companyId')
				});
			} else {
				res = await getAfterSalesList({
					timeBegin: this.timeBegin,
					pageNo: 1,
					pageSize: -1
				});
			}
			res.data.result.records.forEach(item => {
				item.picture = item.picture.split(',');
				item.controlIsCheck = false;
			});
			this.orderList = res.data.result.records;
		},

		changeControlState(index, value) {
			this.clickOrderInfo = value;
			this.orderList[index].controlIsCheck = !this.orderList[index].controlIsCheck;
		},
		clickControlMenu(index, type) {
			if (type == 'refund') {
				this.refundShow = true;
				this.refundIndex = index;
			} else if (type == 'delete') {
				this.deleteShow = true;
				this.deleteIndex = index;
			} else if (type == 'reject') {
				this.rejectShow = true;
				this.rejectIndex = index;
			}
			this.orderList[index].controlIsCheck = !this.orderList[index].controlIsCheck;
		},
		//确认退款
		async hideRefund() {
			let { refundAmount, deductMerchantAmount, deductionRemarks } = this.returnInfo;
			if (!refundAmount || isNaN(Number(refundAmount))) {
				this.$showToast.call(this, '请输入正确的扣款金额', 'warning');
				return;
			}
			if (!deductMerchantAmount || isNaN(Number(deductMerchantAmount))) {
				this.$showToast.call(this, '请输入正确的扣款商家金额', 'warning');
				return;
			}
			this.clickOrderInfo.picture = this.clickOrderInfo.picture.join(',');
			this.clickOrderInfo.refundAmount = refundAmount;
			this.clickOrderInfo.deductMerchantAmount = deductMerchantAmount;
			this.clickOrderInfo.deductionRemarks = deductionRemarks;
			this.clickOrderInfo.state = '已处理';
			let res = await editAfterSaleOrder(this.clickOrderInfo);
			if (res.data.success) {
				this.$showToast.call(this, '退款成功');
				this.getAfterSalesList();
				this.refundShow = false;
			} else {
				this.$showToast.call(this, res.data.message, 'warning');
			}
		},
		async refund() {
			if (!this.rejectReason) {
				this.$showToast.call(this, '请输入驳回售后的原因', 'warning');
				return;
			}
			this.clickOrderInfo.picture = this.clickOrderInfo.picture.join(',');
			this.clickOrderInfo.state = '已驳回';
			this.clickOrderInfo.reasonRejection = this.rejectReason;
			let res = await editAfterSaleOrder(this.clickOrderInfo);
			if (res.data.success) {
				this.$showToast.call(this, '已驳回该订单');
				this.getAfterSalesList();
				this.rejectShow = false;
			} else {
				this.$showToast.call(this, res.data.message, 'warning');
			}
		}
		//删除订单--取消删除
		// deleteCancel() {
		// 	this.deleteShow = false
		// },
		//删除订单--确认删除
		// deleteSubmit() {
		// 	this.deleteShow = false
		// }
	}
};
</script>

<style lang="scss" scoped>
.bigBox {
	background-color: #f5f5f5;
	padding-bottom: 200rpx;
	min-height: 100vh;
}

.top {
	background-color: #fff;
	text-align: center;
	padding: 30rpx 0;
	position: relative;
	font-size: 32rpx;
	font-weight: bold;
	line-height: 2;

	image {
		width: 30rpx;
		height: 30rpx;
		transform: rotate(90deg);
		position: absolute;
		left: 40rpx;
		top: calc((100% - 30rpx) / 2);
	}
}

.topMenu {
	padding: 20rpx 0;
	background-color: #fff;
	padding: 20rpx;
	@include flexs(flex-start, flex-start);

	> view {
		margin-right: 30rpx;
		font-size: 40rpx;
		line-height: 56rpx;
		color: rgba(0, 0, 0, 0.35);
		font-weight: bold;

		> view:nth-child(2) {
			width: 40rpx;
			height: 8rpx;
			background: #f1b825;
			margin-top: 10rpx;
			display: none;
		}
	}

	> .check {
		color: #000;

		> view:nth-child(2) {
			display: block;
		}
	}
}

// .top {
// 	padding: 20rpx;
// 	@include flexs(space-between, center);
// 	background-color: #fff;

// 	>view {
// 		@include flexs();

// 		&:nth-child(1) {
// 			font-size: 28rpx;
// 			line-height: 40rpx;

// 			image {
// 				width: 20rpx;
// 				height: 20rpx;
// 				margin-left: 10rpx;
// 			}

// 			margin-right: 40rpx;
// 		}

// 		&:nth-child(2) {
// 			flex: 1;
// 			margin-left: 20rpx;
// 			@include flexs();

// 			image {
// 				width: 50rpx;
// 				height: 50rpx;
// 				position: absolute;
// 				left: 10rpx;
// 				top: 5rpx;
// 			}

// 			border-radius: 50rpx;
// 			border: 1px solid #f5f5f5;
// 			position: relative;
// 			overflow: hidden;

// 			/deep/.u-input__input {
// 				font-size: 28rpx;
// 				line-height: 60rpx;
// 				height: 60rpx;
// 				min-height: auto !important;
// 				text-indent: 60rpx;
// 				background-color: #f5f5f5;
// 			}
// 		}
// 	}
// }

.orderList {
	padding: 20rpx;
	background-color: #fff;
	padding: 30rpx 20rpx;
	margin-top: 20rpx;

	.name {
		@include flexs(space-between, center);
		font-size: 32rpx;
		line-height: 40rpx;

		> view:nth-child(1) {
			@include flexs();
			color: #000;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}

		.controlBox {
			width: 200rpx;
			position: relative;
			text-align: right;

			> view:nth-child(1) {
				@include flexs(flex-end, center);
				padding: 10rpx 0;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
					transform: rotate(-90deg);
				}
			}

			> view:nth-child(2) {
				display: none;
				width: 100%;
				position: absolute;
				left: 0;
				top: 100%;
				background-color: #fff;
				box-shadow: 0 0 5px #eee;
				padding: 10rpx 10rpx;

				> view {
					border-bottom: 1px solid #eee;
					padding: 10rpx;
					text-align: center;

					&:last-child {
						border: 0;
					}
				}

				&:hover {
					> view {
						display: block;
					}
				}
			}
		}

		.isControlCheck {
			> view:nth-child(1) {
				image {
					transform: rotate(0);
				}
			}

			> view:nth-child(2) {
				display: block;
			}
		}
	}

	> view {
		@include flexs();
		font-size: 32rpx;
		flex-wrap: wrap;
		// color: rgba(0, 0, 0, 0.35);
		color: #000;
		line-height: 2;
		margin: 10rpx 0;

		> view {
			margin-right: 20rpx;
			flex-shrink: 0;

			text {
				color: #000;
				margin-left: 10rpx;
			}
		}
	}

	.special {
		> view {
			width: 50%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	> .w50 {
		> view {
			width: 50%;
		}
	}

	> .imgContent {
		@include flexs(flex-start, flex-start);
		flex-wrap: nowrap;

		image {
			width: 150rpx;
			height: 150rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}

		.imgBox {
			flex: 1;
			@include flexs(flex-start, flex-start);
			flex-wrap: wrap;
		}
	}
}

.refundContent {
	.title {
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 36rpx;
	}

	.writeLi {
		margin-bottom: 34rpx;

		> view {
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: bold;
		}

		.u-input {
			background-color: #f5f5f5;
			margin-top: 20rpx;
			padding: 20rpx 32rpx !important;

			/deep/.u-input__input {
				min-height: auto !important;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			/deep/.u-input__textarea {
				min-height: 150rpx !important;
			}
		}
	}
}

.deleteContent {
	.title {
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 36rpx;
	}

	.text {
		font-size: 28rpx;
		line-height: 40rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.control {
		@include flexs(space-between, center);

		> view {
			width: 272rpx;
			text-align: center;
			font-size: 32rpx;
			line-height: 88rpx;
			border-radius: 100rpx;
			margin-top: 40rpx;

			&:nth-child(1) {
				border: 1px solid #eee;
			}

			&:nth-child(2) {
				background-color: #f1b825;
				color: #fff;
			}
		}
	}
}
</style>

<style lang="scss">
/deep/.u-model__title {
	padding-top: 0 !important;
}

.bigBox {
	/deep/.u-mode-center-box {
		width: 90% !important;
		max-height: 90vh;
		padding: 40rpx 36rpx;
		border-radius: 20rpx;
	}
}

.delOrder {
	/deep/.u-mode-center-box {
		padding: 80rpx 36rpx;
	}
}
</style>
